<template>
	<div class="guid-page">
		<div class="guid-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />
			<div class="cont-box">
				<TitleBox>
					<template #titlecont>
						<span v-lang="{lang: controlSto.language, lgid: -12}">TCM-Comb Guidance </span>
					</template>
				</TitleBox>
				<div class="guid-box">
					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>1. <span v-lang="{lang: controlSto.language, lgid: -90}">Tutorial for browsing prescriptions in TCM-Comb</span></span>
							</div>
							<div class="item-right">
								<div class="act-box"  @click.stop="toExpand(1)">
									<el-image v-if="dataObj.isShowExp1" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp1" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd1 : Gurdz1" width="100%"/>
						</div>
					</div>




					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>2. <span v-lang="{lang: controlSto.language, lgid: -91}">Tutorial fou browsing herbs in TCM_Comb</span></span>
							</div>
							<div class="item-right">
								<div class="act-box"  @click.stop="toExpand(2)">
									<el-image v-if="dataObj.isShowExp2" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp2" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd2 : Gurdz2" width="100%"/>
						</div>
					</div>


					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>3. <span v-lang="{lang: controlSto.language, lgid: -92}">Tutorial fou browsing ingredients in TCM_Comb</span></span>
							</div>
							<div class="item-right">
								<div class="act-box" @click.stop="toExpand(3)">
									<el-image v-if="dataObj.isShowExp3" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp3" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd3 : Gurdz3" width="100%"/>
						</div>
					</div>

					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>4. <span v-lang="{lang: controlSto.language, lgid: -93}">Tutorial fou browsing Diseases in TCM-Comb</span></span>
							</div>
							<div class="item-right">
								<div class="act-box" @click.stop="toExpand(4)">
									<el-image v-if="dataObj.isShowExp4" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp4" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd4 : Gurdz4" width="100%"/>
						</div>
					</div>

					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>5. <span v-lang="{lang: controlSto.language, lgid: -94}">Tutorial for searching a TCM prescription, herb, ingredient and a disease in TCM-Comb</span></span>
							</div>
							<div class="item-right">
								<div class="act-box" @click.stop="toExpand(5)">
									<el-image v-if="dataObj.isShowExp5" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp5" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd5 : Gurdz5" width="100%"/>
						</div>
					</div>

					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>6. <span v-lang="{lang: controlSto.language, lgid: -95}">Tutorial for systematic analysis on interactions among TCM prescriptions, herbs, ingredients and a disease as users' selection</span></span>
							</div>
							<div class="item-right">
								<div class="act-box" @click.stop="toExpand(6)">
									<el-image v-if="dataObj.isShowExp6" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp6" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd6 : Gurdz6" width="100%"/>
						</div>
					</div>


					<div class="guid-item">
						<div class="item-head-box">
							<div class="item-left">
								<span>7. <span v-lang="{lang: controlSto.language, lgid: -96}">Tutorial for browsing ADMET in TCM-Comb</span></span>
							</div>
							<div class="item-right">
								<div class="act-box" @click.stop="toExpand(7)">
									<el-image v-if="dataObj.isShowExp7" class="act-img" :src="minuImg" fit="contain" />
									<el-image v-else class="act-img" :src="addImg" fit="contain" />
								</div>
							</div>
						</div>
						<div v-if="dataObj.isShowExp7" class="item-cont-box">
							<img :src="controlSto.language == 1 ? Gurd7 : Gurdz7" width="100%"/>
						</div>
					</div>
					     
					
				</div>
			</div>
		</div>
    </div>
</template>



<script setup>
    import { ref, reactive, computed, onBeforeMount } from 'vue'
    import BreadCrumb from '@/components/BreadCrumb.vue'
    import TitleBox from '@/components/TitleBox.vue'
		import Gurd1 from '@/assets/img/gurd1.png'
		import Gurd2 from '@/assets/img/gurd2.png'
		import Gurd3 from '@/assets/img/gurd3.png'
		import Gurd4 from '@/assets/img/gurd4.png'
		import Gurd5 from '@/assets/img/gurd5.png'
		import Gurd6 from '@/assets/img/gurd6.png'
		import Gurd7 from '@/assets/img/gurd7.png'

		import Gurdz1 from '@/assets/img/gurdz1.png'
		import Gurdz2 from '@/assets/img/gurdz2.png'
		import Gurdz3 from '@/assets/img/gurdz3.png'
		import Gurdz4 from '@/assets/img/gurdz4.png'
		import Gurdz5 from '@/assets/img/gurdz5.png'
		import Gurdz6 from '@/assets/img/gurdz6.png'
		import Gurdz7 from '@/assets/img/gurdz7.png'

	import addImg from '@/assets/img/add.png'
    import minuImg from '@/assets/img/minu.png'

    import { controlStore } from '@/stores/control'
	


	const controlSto = controlStore();
	const dataObj = reactive({
		crumbList: [
			{
				fkey: '-16',
                lable: 'Home',
                name: 'home'
            }, {
				fkey: '-12',
                lable: 'TCM-Comb Guidanc',
                name: ''
            }
        ],
		isShowExp1: false,
		isShowExp2: false,
		isShowExp3: false,
		isShowExp4: false,
		isShowExp5: false,
		isShowExp6: false,
		isShowExp7: false
	});

	const toExpand = (i) => {
        if(i == 1) {
			dataObj.isShowExp1 = !dataObj.isShowExp1;
		} else if(i == 2) {
			dataObj.isShowExp2 = !dataObj.isShowExp2;
		} else if(i == 3) {
			dataObj.isShowExp3 = !dataObj.isShowExp3;
		} else if(i == 4) {
			dataObj.isShowExp4 = !dataObj.isShowExp4;
		} else if(i == 5) {
			dataObj.isShowExp5 = !dataObj.isShowExp5;
		} else if(i == 6) {
			dataObj.isShowExp6 = !dataObj.isShowExp6;
		} else if(i == 7) {
			dataObj.isShowExp7 = !dataObj.isShowExp7;
		}
  };


</script>

<style lang="scss" scoped>
	.guid-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		text-align: center;
		background-size: 100% 100%;
		.guid-cont {
			display: inline-block;
			// width: 1400px;
    		text-align: left;
		}
		.guid-box {
			padding-top: 28px;
			.guid-item {
				margin-top: 12px;
				.item-head-box {
					display: flex;
					height: 56px;
					padding: 0 32px;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #BC9F77;
					background-color: #F8F5F1;
					.item-left {
						font-weight: 600;
						font-size: 16px;
						color: #333333;
					}
					.item-right {
						.act-box {
							width: 24px;
							height: 24px;
							cursor: pointer;
						}
						.act-img {
							width: 24px;
						}
					}
				}
				.item-cont-box {
					// height: 100px;
					text-align: center;
					border: 1px solid #BC9F77;
					border-top: none;
				}
			}



		}
	}
	
</style>
